<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/react.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/react-dom.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/babel.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
		<div id="app"></div>
		
	</body>
	<script type="text/babel">
		//方法一：   创建了一个组件      React.createClass({})
		/*var MyBtn = React.createClass({
			render(){
				return (
					<div>
						<button> <i>123123123</i> </button>
					</div>
				)
			}
		})*/
		
		
		// 方法二： 利用构造函数 构建组件
		/*function MyBtn(){
			return  (
					<div>
						<button> <i>qqq</i> </button>
					</div>
				)
		}*/
		
		
		// 方法三：  通过ES6 定义类
		class MyBtn  extends React.Component {
			render(){
				return (
					<div>
						<button> <i>wwwww</i> </button>
					</div>
				)
			}
		}
		
		
		// 渲染
		var app = document.getElementById("app");
		ReactDOM.render(<MyBtn/>, app)
		// 注意“： 组件名首字母大写
	</script>
</html>
